<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Three column fluid layout with rounded content corners and 100% height and width | Strictly CSS </title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="shortcut icon" href="/favicon.ico" />
<script type="text/javascript" src="scripts/jquery.ui-1.5.2/jquery-1.2.6.js"></script>
<style type="text/css">
/*
CSS-file for Strictly CSS three column layout 2006
http://www.strictlycss.com
Developed by Eivind Savio
*/
* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
}
body, html {
color: #000; 
font-family: Verdana, Arial, Tahoma, sans-serif;
height: 100%;
background: url(styles/images/left-bg.gif) repeat-y #fff;  /*** This is the left column background "faked" with an image. You can also position the image using left top repeat-y also. The background color #fff (white) will be the background color for our content ***/
}
body {
font-size: 70%;
min-width: 760px;
}
p {
padding: 7px 0 7px 0;
}
a {
color: #000099;
}
a:hover{
color: #0000FF;
text-decoration: none;
}
h2, h3 {
font-weight: bold;
padding-bottom: 5px;
}
h1 {
font-weight: normal;
font-size: 1.8em;
}
h2 {
font-size: 1.3em;
}
h3 {
font-size: 1.2em;
}
h1 a, #header h2{
color: #fff;
}
.clear { clear: both; }
#mainContainer {
min-height: 100%;
background: url(styles/images/right-bg.gif) 100% 0 repeat-y; /*** This is the right column background "faked" with an image. You can also position the image using right top repeat-y also. ***/
}
* html #mainContainer {
height: 100%; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
/**************************
HEADER
**************************/
#header {
background: #67A7E3;
padding: 3px;
}
/**************************
CONTENT AND COLUMNS
**************************/
.outer {
padding-left: 165px; /*** Same width as margin-left for the float-wrap div ***/
padding-right: 100px; /*** Our right column width ***/
}
.inner {
width: 100%;
padding-bottom: 45px; /*** Padding-bottom value is the same value as the total height of the footer ***/
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
float: left;
width: 100%;
margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
}

#content {
float: right;
margin-right: -165px; /*** Same length as .outer padding-left but with negative value ***/
width: 100%;
background: url(styles/images/t-2.gif) 100% 0 no-repeat; /*** Our upper right rounded image to create the rounded content look ***/
border-top: 10px solid #F1F1F1; /*** We have used border top here to push the content down, but other solutions can also be used ***/
position: relative; /*** IE needs this  ***/
}

.contentWrap{
padding: 5px;
}
.contentWrap ol, .contentWrap ul {
margin: 3px 0 5px 35px;
}
.contentWrap li {
padding-bottom: 2px;
}
/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#left {
float: left;
width: 155px;
padding: 5px;
border-top: 10px solid #F1F1F1; /*** We have used border top here to push the left column content down, but other solutions can also be used ***/
background: url(styles/images/t-1.gif) 100% 0 no-repeat; /*** Our upper left rounded image to create the rounded content look ***/
position: relative; /*** IE needs this  ***/
}

#left ul {
list-style: none;
padding-bottom: 4px;
}
#left li {
padding-bottom: 2px;
}
/*************************
RIGHT COLUMN
**************************/
#right {
float: right; 
width: 100px;
padding: 5px 0 0 10px;
position: relative; /*** IE needs this  ***/
margin-right: -100px; /** This negative margin-right value is in this example the same as the right column width. ***/
border-top: 10px solid #F1F1F1;
position: relative; /*** IE needs this  ***/
}

#right ul {
list-style: none;
padding-bottom: 4px;
}
#right li {
padding-bottom: 2px;
}
/**************************
FOOTER
**************************/
#footer {
height: 45px; /*** The drawback with this solution is that the height of the footer can't be flexible. If you add so much content to the footer that it extends 45px, you will get a vertical scrollbar and the content will overflow the footer if you don't set overflow to hidden ***/
margin-top: -45px; /*** By using a negative margin-top we now moves the footer up the same amount as the footer height to avoid vertical scrolling. Remember, if you use borders and padding on your footer you will have to calculate this in your negative margin-top value also. ***/
text-align: center;
background: url(styles/images/b-bg.gif) repeat-x #F1F1F1; /*** The lower part of the rounded content look ***/
}
#footerLeft, #footerRight {
height: 15px; 
background: #F1F1F1;
}
#footerLeft {
float: left; 
width: 165px; /*** Same length as .outer padding-left ***/
background: url(styles/images/b-1.gif) 100% 0 no-repeat #F1F1F1; /*** Our left bottom part of the rounded content look ***/
}
#footerRight {
float: right;
width: 115px; /*** Same length as right plus some padding. If you get a horisontal scrollbar try to adjust this value. ***/
background: url(styles/images/b-2.gif) no-repeat #F1F1F1; /*** Our right bottom part of the rounded content look ***/
}
#footer p {
clear: both;
}
</style>
<script type="text/javascript">

(function($){
 	$.fn.extend({ 
 		layout: function(options) {
 			
    		return this.each(function() {
				
		    	//Creating a reference to the object
				var obj = $(this);

		    	// bind for the load event
				$(document).bind(options.name + '.load', function(e, url){
					obj.attr('url',url);
					obj.load(url);
				});

				// bind for the refresh event
				$(document).bind(options.name + '.refresh', function(e){
					obj.load(obj.attr('url'));
				});

				

				alert('options ' + options.name);
				//Create a reference for all headings and it's content using .next()
				//Remember to pass the object reference "obj" into the identifier.
/*				var headings = $('h2', obj);
				var tabContent = $('h2', obj).next();
			
				//We wan't to hide the headings and the content
				headings.hide();
				tabContent.hide();
				//But we want to show content of the first tab since it's selected by default. 
				tabContent.eq(0).show();
				
				//Prepend the object with the tab container (ul).
				obj.prepend('<ul class="tabs"><\/ul>');
				
				//For every heading create an item (<li>)
				for(var i=0;i<headings.length;i++) {
					
					var sel;
					//The first object is selected by default so add class="sel" to it
					if(i == 0){
						sel = ' class="sel"';
					}
					//Else set it to empty
					else {
						sel ="";
					}
					//the label for the tab should equal the text of the heading
					var label = headings.eq(i).text();
					$("ul.tabs", obj).append('<li' + sel + '>' + label + '<\/li>');
				}
				
				//Create a reference to the tabs for each obj
				var tabs = $("ul.tabs li", obj);
				
				tabs.click(function() {
					
					//When a tab is clicked "de-activate" the old one
					$("ul.tabs li.sel", obj).removeClass("sel");
					tabContent.hide();
					$(this).addClass("sel");
					
					//And display the clicked tab
					var current = tabs.index($(this));
					tabContent.eq(current).show();
				});
				*/
    		});
    	}
	});
})(jQuery);
var viewingHistory = new Array();
var index = 0;
function loadPageInContentArea(url, ignore){
	if (!ignore){
		viewingHistory[index] = url;
		index++;
	}
	$.ajax({
			url: url,
			error: function(e){
				alert('error' + e);
			},
			success: function(response){
				$('#contentWrap').html(response);
			}
		});
	$('#contentWrap');
}

$(document).ready(function(){
	alert('ready');
	$('div#contentWrap').layout({name: 'main'});
});
</script>
</head>
<body>
<div id="mainContainer">
<div id="header">
<h1><a href="#">Grouper Accounts</a> : Company Management</h1>
</div> 
<div class="outer">
<div class="inner">
<div class="float-wrap">
        <div id="content"> 
          <div id="contentWrap" class="contentWrap"> 
            <h2>First in source</h2>

            <p>This is a layout that is fluid (100% width), has a height of 100% 
              and rounded content corners.</p>
            <p>The center/content column is fluid, but left and right column is 
              fixed. The rounded content corners look is "faked" using background 
              images in body, #mainContainer, #content, #left and two divs inside 
              the footer. Border-top is added to #left, #content and #right.</p>
            <p>For further information about how this layout is made, take a look 
              in the source code.</p>
            <h3>What is this about?</h3>
            <p>This example page is belonging to the article <a href="http://www.strictlycss.com/articles/article/46/three-column-fluid-css-layout-with-rounded-content-corners-and-100-height"><strong>Three 
              column fluid CSS layout with rounded content corners and 100% height</strong></a>.</p>

            <h3>Related CSS articles and examples</h3>
            <p>Below are some articles and layouts that are related to these examples.</p>
            <ol>
              <li><a href="/articles/article/40/the-only-css-layout-you-need"><strong>The 
                only CSS layout you need(?)</strong></a> 
                <ol>
                  <li><a href="/examples/three-column-layout-1.asp">Three column 
                    CSS layout - left and right menu</a>. This is the basis layout 
                    for all the different layouts.</li>
                  <li><a href="/examples/three-column-layout-2.asp">Two column 
                    CSS layout - top and left menu</a></li>

                  <li><a href="/examples/three-column-layout-3.asp">Two column 
                    CSS layout - top and right menu</a></li>
                  <li><a href="/examples/three-column-layout-4.asp">Two column 
                    CSS layout - left and footer menu</a></li>
                  <li><a href="/examples/three-column-layout-5.asp">Two column 
                    CSS layout - right and footer menu</a></li>
                  <li><a href="/examples/three-column-layout-6.asp">Three column 
                    CSS layout: 100% height with footer</a>. This layout is also 
                    using <a href="/articles/article/22/css-faux-columns">Faux 
                    columns</a>. </li>
                  <li><a href="/examples/three-column-layout-7.asp">Three column 
                    CSS fluid layout: 100% width</a></li>

                  <li><a href="/examples/three-column-layout-8.asp">Three column 
                    CSS fluid layout: 100% width and with column borders</a></li>
                  <li><a href="/examples/three-column-layout-9.asp">Two column 
                    CSS layout - header and left menu</a></li>
                  <li><a href="/examples/three-column-layout-10.asp">One column 
                    CSS layout - top and footer menu</a></li>
                </ol>
              </li>
            </ol>
          </div>

        </div>
        <!-- end centered div -->
        <div id="left"> 
          <h3>Actions</h3>
          <ul>
            <li><a href="#" onclick="$(document).trigger('main.load',['/grouper-webapp/accounts/companyList.html?page=0&size=25&sort=name&order=']);">List Companies</a></li>
            <li><a href="#" onclick="javascript:loadPageInContentArea('/grouper-webapp/accounts/createCompany.html');">Create New</a></li>
          </ul>
        </div>
<!-- end left div -->
<div class="clear"></div> 
</div>

      <div id="right"> 
        <h3>Third in source</h3>
        <ul>
          <li><a href="#">Right menu 1</a></li>

          <li><a href="#">Right menu 2</a></li>
          <li><a href="#">Right menu 3</a></li>
        </ul>
      </div>
      <!-- end right div -->
<div class="clear"></div> 
</div>
</div>
</div>
<div id="footer">

<div id="footerLeft"></div><div id="footerRight"></div>
<p>This is our footer</p>
</div>

</body>
</html>